<template>
  <view class="evaluation-page">
    <!-- 空状态 -->
    <view class="empty-state" v-if="evaluationList.length === 0">
      <uni-icons type="chatbubble" size="80" color="#ccc"></uni-icons>
      <text class="empty-text">暂无评价记录</text>
      <text class="empty-hint">完成订单后可进行评价</text>
    </view>

    <!-- 评价列表 -->
    <view class="evaluation-list" v-else>
      <view 
        class="evaluation-item" 
        v-for="(item, index) in evaluationList" 
        :key="item.id"
      >
        <!-- 商家信息 -->
        <view class="store-header">
          <image :src="item.storeImage" class="store-image"></image>
          <view class="store-info">
            <text class="store-name">{{ item.storeName }}</text>
            <text class="order-time">{{ item.orderTime }}</text>
          </view>
        </view>

        <!-- 评分 -->
        <view class="rating-section">
          <text class="rating-label">评分:</text>
          <view class="stars">
            <uni-icons 
              v-for="star in 5" 
              :key="star"
              type="star-filled" 
              size="24"
              :color="star <= item.rating ? '#FFD700' : '#e0e0e0'"
            ></uni-icons>
          </view>
        </view>

        <!-- 评价内容 -->
        <view class="evaluation-content" v-if="item.content">
          <text class="content-text">{{ item.content }}</text>
        </view>

        <!-- 评价图片 -->
        <view class="evaluation-images" v-if="item.images && item.images.length > 0">
          <image 
            v-for="(img, imgIndex) in item.images" 
            :key="imgIndex"
            :src="img" 
            class="eval-image"
            mode="aspectFill"
            @tap="previewImage(item.images, imgIndex)"
          ></image>
        </view>

        <!-- 商家回复 -->
        <view class="merchant-reply" v-if="item.reply">
          <view class="reply-header">
            <uni-icons type="chatbubble" size="16" color="#00C853"></uni-icons>
            <text class="reply-label">商家回复:</text>
          </view>
          <text class="reply-content">{{ item.reply }}</text>
        </view>

        <!-- 操作按钮 -->
        <view class="item-actions">
          <button class="action-btn" @tap="deleteEvaluation(index)">
            <uni-icons type="trash" size="16" color="#ff3b30"></uni-icons>
            <text>删除</text>
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 评价数据接口
interface EvaluationItem {
  id: number;
  storeName: string;
  storeImage: string;
  orderTime: string;
  rating: number;
  content: string;
  images?: string[];
  reply?: string;
}

// 模拟评价数据
const evaluationList = ref<EvaluationItem[]>([
  {
    id: 1,
    storeName: '绿光餐厅(科技园店)',
    storeImage: '/static/shangjia01.png',
    orderTime: '2024-01-15 12:30',
    rating: 5,
    content: '味道很好,配送也很快,非常满意!会继续光顾的。',
    images: ['/static/food01.png', '/static/food02.png'],
    reply: '感谢您的支持,我们会继续努力为您提供更好的服务!'
  },
  {
    id: 2,
    storeName: '和风寿司料理',
    storeImage: '/static/shangjia02.png',
    orderTime: '2024-01-14 18:45',
    rating: 4,
    content: '寿司新鲜,味道不错,就是配送稍微慢了一点。',
    images: ['/static/food03.png']
  },
  {
    id: 3,
    storeName: '川味小馆',
    storeImage: '/static/shangjia03.png',
    orderTime: '2024-01-13 13:20',
    rating: 5,
    content: '麻辣鲜香,正宗川味!强烈推荐!',
    reply: '谢谢亲的好评,欢迎再次光临!'
  }
]);

// 预览图片
const previewImage = (images: string[], current: number) => {
  uni.previewImage({
    urls: images,
    current: current
  });
};

// 删除评价
const deleteEvaluation = (index: number) => {
  uni.showModal({
    title: '提示',
    content: '确定要删除这条评价吗?',
    success: (res) => {
      if (res.confirm) {
        evaluationList.value.splice(index, 1);
        uni.showToast({
          title: '删除成功',
          icon: 'success'
        });
      }
    }
  });
};
</script>

<style scoped>
.evaluation-page {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-top: 20rpx;
}

.empty-hint {
  font-size: 24rpx;
  color: #ccc;
  margin-top: 10rpx;
}

.evaluation-list {
  padding: 20rpx;
}

.evaluation-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.store-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.store-image {
  width: 80rpx;
  height: 80rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.store-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.store-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.order-time {
  font-size: 24rpx;
  color: #999;
}

.rating-section {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}

.rating-label {
  font-size: 26rpx;
  color: #666;
  margin-right: 15rpx;
}

.stars {
  display: flex;
  gap: 5rpx;
}

.evaluation-content {
  margin-bottom: 15rpx;
}

.content-text {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
}

.evaluation-images {
  display: flex;
  gap: 10rpx;
  margin-bottom: 15rpx;
}

.eval-image {
  width: 150rpx;
  height: 150rpx;
  border-radius: 8rpx;
}

.merchant-reply {
  background-color: #f8f8f8;
  border-radius: 8rpx;
  padding: 20rpx;
  margin-bottom: 15rpx;
}

.reply-header {
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-bottom: 10rpx;
}

.reply-label {
  font-size: 24rpx;
  color: #00C853;
  font-weight: bold;
}

.reply-content {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}

.item-actions {
  display: flex;
  justify-content: flex-end;
  border-top: 1rpx solid #f0f0f0;
  padding-top: 15rpx;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 10rpx 20rpx;
  background-color: #fff5f5;
  color: #ff3b30;
  border-radius: 30rpx;
  font-size: 24rpx;
  border: none;
}
</style>